<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Carousel Example</title>
<style type="text/css">
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 20px;
        color: #333333;
        margin: 0 0;
        padding: 10px 0 30px;
    }

    h1 {
        padding: 20px 5px 0;
        font-size: 24px;
    }

    h4 {
        font-size: 17.5px;
    }

    a {
        text-decoration: none;
    }

    p {
        padding: 0 5px;
    }

    .carousel {
        width: 320px;
        position: relative;
        margin-bottom: 20px;
        overflow: hidden;
        line-height: 1;
    }

    .carousel-indicators {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 5;
        margin: 0;
        list-style: none;
    }

    .carousel-indicators li {
        display: block;
        float: left;
        width: 10px;
        height: 10px;
        margin-left: 5px;
        text-indent: -999px;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 5px;
    }

    .carousel-indicators .active {
        background-color: #fff;
    }

    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .carousel-inner > div {
        display: none;
    }

    .carousel-caption {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 15px;
        background: rgba(0, 0, 0, 0.75);
    }

    .carousel-caption h4 {
        margin: 0 0 5px;
        line-height: 20px;
        color: #ffffff;
    }

    .carousel-control {
        position: absolute;
        top: 40%;
        left: 15px;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        font-size: 60px;
        font-weight: 100;
        line-height: 30px;
        color: #ffffff;
        text-align: center;
        background: #222222;
        border: 3px solid #ffffff;
        -webkit-border-radius: 23px;
        border-radius: 23px;
        opacity: 0.5;
    }

    .carousel-control:hover, .carousel-control:focus {
        color: #ffffff;
        text-decoration: none;
        opacity: 0.9;
    }

    .carousel-control.right {
        right: 15px;
        left: auto;
    }

    img {
        width: 320px;
    }

    #myCarousel4 {
        width: 320px;
        position: relative;
        margin-bottom: 20px;
        overflow: hidden;
        line-height: 1;
    }

    #myCarousel4 > div {
        display: none;
    }
</style>
</head>
<body>

<p>在PC端使用 Chrome 浏览器调试时，需要打开控制台，选中“Emulate touch events”，才能模拟 touch 效果。</p>

<h1>1. Simple Carousel</h1>

<div id="myCarousel1" class="carousel">
    <ol class="carousel-indicators">
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="carousel-inner">
        <div style="display: block;">
            <img src="bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
            </div>
        </div>
        <div>
            <img src="bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                <h4>Second Thumbnail label</h4>
            </div>
        </div>
        <div>
            <img src="bootstrap-mdo-sfmoma-03.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
            </div>
        </div>
    </div>
</div>

<h1>2. Carousel Control Button</h1>

<div id="myCarousel2" class="carousel">
    <ol class="carousel-indicators">
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="carousel-inner">
        <div style="display: block;">
            <img src="bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
            </div>
        </div>
        <div>
            <img src="bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                <h4>Second Thumbnail label</h4>
            </div>
        </div>
        <div>
            <img src="bootstrap-mdo-sfmoma-03.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#0">‹</a>
    <a class="right carousel-control" href="#0">›</a>
</div>

<h1>3. Custom itemSelector</h1>

<div id="myCarousel3" class="carousel">
    <ol class="carousel-indicators">
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="carousel-inner">
        <div style="display: block;">
            <img src="bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
            </div>
        </div>
        <div>
            <img src="bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                <h4>Second Thumbnail label</h4>
            </div>
        </div>
        <div>
            <img src="bootstrap-mdo-sfmoma-03.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#0">‹</a>
    <a class="right carousel-control" href="#0">›</a>
</div>

<h1>4. Clear Carousel</h1>

<div id="myCarousel4">
    <div style="display: block;">
        <img src="bootstrap-mdo-sfmoma-01.jpg" alt="">
    </div>
    <div>
        <img src="bootstrap-mdo-sfmoma-02.jpg" alt="">
    </div>
    <div>
        <img src="bootstrap-mdo-sfmoma-03.jpg" alt="">
    </div>
</div>


<script type="text/javascript" src="../carousel.js"></script>
<script type="text/javascript">
    new Carousel({
        targetSelector: '#myCarousel1 .carousel-inner',
        indicatorSelector: '#myCarousel1 .carousel-indicators > li',
        indicatorCls: 'active'
    });

    new Carousel({
        targetSelector: '#myCarousel2 .carousel-inner',
        prevSelector: '#myCarousel2 .left',
        nextSelector: '#myCarousel2 .right',
        indicatorSelector: '#myCarousel2 .carousel-indicators > li',
        indicatorCls: 'active'
    });

    new Carousel({
        targetSelector: '#myCarousel3',
        itemSelector: '.carousel-inner > div',
        prevSelector: '#myCarousel3 .left',
        nextSelector: '#myCarousel3 .right',
        indicatorSelector: '#myCarousel3 .carousel-indicators > li',
        indicatorCls: 'active'
    });

    new Carousel({
        targetSelector: '#myCarousel4'
    });
</script>

</body>
</html>